<template>
    <div class="screen-block">
        <Title>燃料加注金额</Title>
        <div style="width: 100%; height: 90%">
            <Charts :option="option" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { Charts } from '@kjgl77/datav-vue3';
    import Title from '../title.vue';

    const option = ref({
        series: [
            {
                type: 'pie',
                data: [
                    { name: '收费系统', value: 93 },
                    { name: '通信系统', value: 32 },
                    { name: '监控系统', value: 65 },
                    { name: '供配电系统', value: 44 },
                    { name: '其他', value: 52 },
                ],
                radius: ['45%', '65%'],
                insideLabel: {
                    show: false,
                },
                outsideLabel: {
                    labelLineEndLength: 10,
                    formatter: '{percent}%\n{name}',
                    style: {
                        fontSize: 14,
                        fill: '#fff',
                    },
                },
            },
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
    });
</script>

<style lang="less">
    .screen-block {
        width: 100%;
        height: 100%;
    }
</style>
